<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>问卷编辑</title>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/index.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/dtree/dtree.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/dtree/font/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/darkBlue.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/work/question/question.css"/>
</head>
<style>
    .layui-textarea{border:1px solid #ddd!important;padding:3px 7px!important;}
    .template-ctn{width:calc(100% - 164px);height:90px;border:1px solid #ddd;border-radius:2px; padding:5px 9px; color:#333;}
    .template-ctn span{ display: inline-block;height:24px;line-height:24px;text-align:center;border-radius:3px;background:#f5f5f5; margin:5px;padding:0 7px;}
    .template-btn-list{position:absolute;width:135px;height:100px;top:0;right:-15px; color:#5383f9!important; font-size:16px!important;}
    .template-btn-list ul li{ margin-top:10px;}
    .template-btn-list ul li i{margin-right:5px;}
    .quesition-tj-list dl dd {
        padding: 10px 0px 10px;
    }
    .layui-textarea{border:1px solid #ddd!important;padding:3px 7px!important;}
    .template-ctn{width:calc(100% - 164px);height:90px;border:1px solid #ddd;border-radius:2px; padding:5px 9px; color:#333;}
    .template-ctn span{ display: inline-block;height:24px;line-height:24px;text-align:center;border-radius:3px;background:#f5f5f5; margin:5px;padding:0 7px;}
    .template-btn-list{position:absolute;width:135px;height:100px;top:0;right:-15px; color:#5383f9!important; font-size:16px!important;}
    .template-btn-list ul li{ margin-top:10px;}
    .template-btn-list ul li i{margin-right:5px;}
    .wrong-list{width:auto;height:auto;max-height:260px; overflow-y: auto;max-width:400px; overflow-x: auto;}
    .wrong-list table thead{background-color:#f5f5f5;}
    .wrong-list table thead th{padding:10px 15px;}
    .wrong-list table tr td{ text-align:center;padding:7px 15px;}
    .wrong-list table tbody tr:nth-child(even){background: #f2f2f2;}
    .data-list{width:360px; font-size: 12px; color:#666;padding:10px 0;margin: 0 auto; text-indent:10px;}
</style>
<body class="wrap-container clearfix">
<div class="column-content-detail">
    <form class="layui-form" action="" id="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">问卷标题：</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required" value="${question.title}" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item marb5">
            <!--search开始-->
            <div class="layui-inline">
                <label class="layui-form-label">类型：</label>
                <div class="layui-input-inline">
                    <select name="type" id="type" lay-filter="type">
                        <option value="1">扫码问卷</option>
                        <option value="2">对象问卷</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline" id="showObject" <#if question == null || question.type == "1">style="display: none"</#if>>
                <label class="layui-form-label">对象：</label>
                <div class="layui-input-inline">
                    <select name="objectType" id="objectType" lay-filter="objectType">
                        <option value="1">所有人</option>
                        <option value="2">教师</option>
                        <option value="3">学生</option>
                        <option value="4">自定义对象</option>
                    </select>
                </div>
            </div>
            <!--search结束-->
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">开放时间：</label>
                <div class="layui-input-inline">
                    <input type="text" name="startTime" id="startTime" lay-verify="date" value="<#if question.startTime??>${question.startTime?string('yyyy-MM-dd')}</#if>" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="text-align:left;text-indent:40px;">~</label>
                <div class="layui-input-inline">
                    <input type="text" name="endTime" id="endTime" lay-verify="date" value="<#if question.endTime??>${question.endTime?string('yyyy-MM-dd')}</#if>" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text" id="showUser" <#if question.type =="1" || question.objectType != "4">style="display: none"</#if>>
            <label class="layui-form-label">对象导入：</label>
            <div class="layui-input-block" style="position:relative">
                <div class="template-ctn" id="questionUser">
                    <#list question.questionUserList as questionUser>
                        <span data-id="${questionUser.userId}">${questionUser.userNumber}-${questionUser.userName}</span>
                    </#list>
                </div>
                <div class="template-btn-list">
                    <ul>
                        <li id="exportExcel"><i class="iconfont FS18">&#xe6b3;</i>模板下载</li>
                        <li id="selectFile" ><i class="iconfont FS16">&#xe612;</i>模板导入</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">描述：</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" name="remark" class="layui-textarea">${question.remark}</textarea>
            </div>
        </div>
        <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">新建题型：</label>-->
            <!--<div class="layui-input-block">-->
                <!--<button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-topic-btn" data-type-id="1">-->
                    <!--<i class="iconfont marr5">&#xe611;</i><span>单选题</span></button>-->
                <!--<button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-topic-btn" data-type-id="2">-->
                    <!--<i class="iconfont marr5">&#xe611;</i><span>多选题</span></button>-->
                <!--<button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-topic-btn" data-type-id="3">-->
                    <!--<i class="iconfont marr5">&#xe611;</i><span>简答题</span></button>-->
            <!--</div>-->
        <!--</div>-->
        <div class="layui-form-item" id="wj">
            <label class="layui-form-label">问卷题目：</label>
            <div class="layui-input-block">
                <div class="layui-question-ctn">
                    <!-- 单选 多选lay-skin="primary"-->
                    <#if question.subjectList?? && (question.subjectList?size > 0)>

                    <#list question.subjectList as subject>

                    <#if subject.type == '1' || subject.type == '2'>
                    <div class="single-choice-list overbtn-oper" <#if subject.type == '1'>data-type="1"<#elseif subject.type == '2'>data-type="2"<#else>data-type="3"</#if>>
                        <div class="layui-question-operabtn">
                            <ul>
                                <li class="sort-asc">上移</li>
                                <li class="sort-down">下移</li>
                                <li class="editopic">编辑</li>
                                <li class="deletopic">删除</li>
                            </ul>
                        </div>
                        <input type="text" class="single-choice-tit" value="${subject.title}" placeholder="请单击此处输入题目标题" style="display: none;">
                        <div class="div-single-choice-tit" style="" data-num="${subject.orderNum}"><span class="topicNum">${subject.orderNum}</span>、<span class="div-single-choice-tit-name">${subject.title}</span>
                            <span class="base-color-bule"><#if subject.type == '1'>[单选题]<#else>[多选题]</#if></span></div>
                        <div class="single-choice-answer">
                            <ul>
                                <#list subject.selectList as subjectSelect>
                                <li>
                                    <div class="single-choice-alph">
                                        <input <#if subject.type == '1'>type="radio"<#elseif subject.type == '2'>type="checkbox" lay-skin="primary"<#else> </#if> name="sex" value="${subjectSelect.num}." title="${subjectSelect.num}.">
                                        <div class="layui-unselect <#if subject.type == '1'>layui-form-radio<#else>layui-form-checkbox</#if> "><i class="layui-anim layui-icon"></i><div>${subjectSelect.num}.</div></div></div>
                                    <input type="text" placeholder="请输入选项内容" class="single-choice-answer-txt" value="${subjectSelect.title}" style="display: none;">
                                    <span class="answer-line" style="">${subjectSelect.title}</span>
                                    <div class="option-list" style="display: none;"><i class="iconfont"></i></div>
                                </li>
                                </#list>
                            </ul>
                            <button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-btn-addoption" style="margin-left: 50px; display: none;"><i class="iconfont marr5"></i>添加选项
                            </button>
                        </div>
                        <div class="layui-form-item clearfix" style="text-align: center; margin-bottom: 0px; display: none;">
                            <button class="layui-btn layui-btn-normal layui-over-btn" type="button">完成编辑</button>
                            <button type="button" id="" class="layui-btn layui-btn-primary canclesubject">取消编辑</button>
                        </div>
                    </div>

                    <#else>
                    <div class="single-choice-list overbtn-oper" data-type="3">
                        <div class="div-single-choice-tit" style="display: block;" data-num="${subject.orderNum}"><span class="topicNum">${subject.orderNum}</span>、<span class="div-single-choice-tit-name">${subject.title}</span><span
                                class="base-color-bule">[简答题]</span></div>
                        <div class="layui-question-operabtn">
                            <ul>
                                <li class="sort-asc">上移</li>
                                <li class="sort-down">下移</li>
                                <li class="editopic">编辑</li>
                                <li class="deletopic">删除</li>
                            </ul>
                        </div>
                        <input type="text" class="single-choice-tit" value="${subject.title}" placeholder="请单击此处输入题目标题"style="display: none;">
                        <div class="single-choice-answer"><textarea class="shortAnswer" rows="2" placeholder="" style="display: none;"></textarea>
                            <p class="short-answer-textarea" style="display: block;"></p></div>
                        <div class="layui-form-item clearfix" style="text-align: center; margin-bottom: 0px; display: none;">
                            <button class="layui-btn layui-btn-normal  layui-over-btn" type="button">完成编辑</button>
                            <button type="button" id="" class="layui-btn layui-btn-primary canclesubject">取消编辑</button>
                            <button type="button" style="display: none;" id="" class="layui-btn layui-btn-primary"></button>
                        </div>
                    </div>
                    </#if>
                    </#list>
                    </#if>
                    <#if question.id == null >
                    <div class="single-choice-list" data-type="1">
                        <div class="layui-question-operabtn">
                            <ul>
                                <li class="sort-asc">上移</li>
                                <li class="sort-down">下移</li>
                                <li class="editopic">编辑</li>
                                <li class="deletopic">删除</li>
                            </ul>
                        </div>
                        <input type="text" class="single-choice-tit" placeholder="请单击此处输入题目标题">
                        <div class="div-single-choice-tit" style=" display:none;" data-num="1">1、<span
                                class="div-single-choice-tit-name"></span><span
                                class="base-color-bule">[单选题]</span></div>
                        <div class="single-choice-answer">
                            <ul>
                                <li>
                                    <div class="single-choice-alph"><input type="radio" name="sex" value="A."
                                                                           title="A."></div>
                                    <input type="text" placeholder="请输入选项内容" class="single-choice-answer-txt">
                                    <span class="answer-line" style="display:none;"></span>
                                    <div class="option-list"><i class="iconfont">&#xe654;</i></div>
                                </li>
                                <li>
                                    <div class="single-choice-alph"><input type="radio" name="sex" value="B."
                                                                           title="B."></div>
                                    <input type="text" placeholder="请输入选项内容" class="single-choice-answer-txt">
                                    <span class="answer-line" style="display:none;"></span>
                                    <div class="option-list"><i class="iconfont">&#xe654;</i></div>
                                </li>
                            </ul>
                            <button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-btn-addoption"
                                    style="margin-left:50px;"><i class="iconfont marr5">&#xe611;</i>添加选项
                            </button>
                        </div>
                        <div class="layui-form-item clearfix" style="text-align:center; margin-bottom:0;">
                            <button class="layui-btn layui-btn-normal layui-over-btn" type="button">完成编辑</button>
                            <button type="button" id="" class="layui-btn layui-btn-primary canclesubject">取消编辑</button>
                        </div>
                    </div>
                    </#if>
                </div>
            </div>
        </div>
<div class="layui-form-item">
    <!--<label class="layui-form-label">新建题型：</label>-->
    <div class="layui-input-block">
        <span style="color:#666">此处点击创建新题型：</span>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-topic-btn" data-type-id="1">
            <i class="iconfont marr5">&#xe611;</i><span>单选题</span></button>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-topic-btn" data-type-id="2">
            <i class="iconfont marr5">&#xe611;</i><span>多选题</span></button>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-topic-btn" data-type-id="3">
            <i class="iconfont marr5">&#xe611;</i><span>简答题</span></button>
    </div>
</div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 0px !important;text-align: center">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="publishBtn">发布</button>
                <button class="layui-btn " lay-submit lay-filter="saveBtn">保存</button>
                <button type="button" id="cancel" class="layui-btn layui-btn-primary">取消</button>
                <!--<button type="button" style="display: none;" id="save" class="layui-btn layui-btn-primary"></button>-->
            </div>
        </div>
    </form>
</div>

<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/lib/KnifeZ/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>

    layui.use(['form', 'jquery', 'fileUtil', 'dialog', 'layer', 'layedit', 'baseutil','laydate','upload'], function () {
        var $ = layui.jquery,
            form = layui.form,
            fileUtil = layui.fileUtil,
            baseutil = layui.baseutil,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate,
            upload = layui.upload,
            dialog = layui.dialog;

        $('#type').val('${question.type}');
        $('#objectType').val('${question.objectType}');

        form.render();

        var id = '${question.id}';
        var parentMenuId = '${parentMenuId}';
        var applyId = '${applyId}';

        laydate.render({
            elem: '#startTime', //指定元素
            type: 'date'
        });
        laydate.render({
            elem: '#endTime', //指定元素
            type: 'date'
        });
        // 上传
        upload.render({
            elem: '#selectFile'
            ,url: '/work/question/importExcel'
            , data: {applyId: applyId}
            , accept: 'file'
            , multiple: true
            , auto: true
            , allDone: function (obj) {
            }
            , done: function (res) {
                if (res.code === 0) {
                    // console.log(res.data);
                    if (res.data != null && res.data.length > 0) {
                        var str = '';
                        for (var i = 0; i < res.data.length; i++) {
                            str += '<span data-id="'+res.data[i].id+'">'+res.data[i].userNumber+'-'+res.data[i].name+'</span>';
                        }
                        $("#questionUser").html(str);
                    }
                } else {
                    // dialog.msg(res.msg);
                    var msg = res.msg;
                    var str = '';
                    var failList = res.data.failList;
                    if (failList != null && failList.length > 0) {
                        for (var i = 0; i < failList.length; i++) {
                            str += '<tr>\
                                <td>'+failList[i].rowNum+'</td>\
                                <td title="'+failList[i].errorMsg+'">'+failList[i].errorMsg+'</td>\
                                </tr>';
                        }
                    }
                    layer.open({
                        type: 1,
                        area: ['400px', '300px'],
                        content: '<div class="data-list">'+msg+'</div><div class="wrong-list"><table width="100%" cellspacing="0" cellpadding="0">' +
                        '<thead>' +
                        '<tr>' +
                        '<th width="80">行号</th>' +
                        '<th>错误信息</th>' +
                        '</tr>' +
                        '</thead>' +
                        '<tbody>' + str + '</tbody>'+
                        '</table></div>'
                    });
                    // 成功条数
                    var successList = res.data.successList;
                    if (successList != null && successList.length > 0) {
                        var str = '';
                        for (var i = 0; i < successList.length; i++) {
                            str += '<span data-id="'+successList[i].id+'">'+successList[i].userNumber+'-'+successList[i].name+'</span>';
                        }
                        $("#questionUser").html(str);
                    }
                }
            }
        });

        $("#exportExcel").on("click",function () {
            //window.location.href = "/work/question/exportExcel";
            window.location.href = "/upload/QuestionUser.xls";
        });

        // 监听保存
        form.on('submit(saveBtn)', function (data) {
            // 完成编辑题目才能进行下一步
            var editFlag = true;
            $(".layui-question-ctn .single-choice-list").each(function () {
                if(!$(this).hasClass("overbtn-oper")){
                    editFlag = flag;
                    return false;
                }
            });
            if (!editFlag) {
                dialog.msg("请完成题目编辑");
                return false;
            }
            var field = data.field;
            var questionData = {};
            questionData.title = field.title;
            questionData.type = field.type;
            if (isBlank(field.type)) {
                dialog.msg("请选择类型");
                return false;
            }
            questionData.objectType = field.objectType;
            if (field.type == '2' && isBlank(field.objectType)) {
                dialog.msg("请选择对象");
                return false;
            }
            questionData.startTimeStr = field.startTime;
            questionData.endTimeStr = field.endTime;
            questionData.remark = field.remark;
            // 用户
            var userArr = [];
            $("#questionUser span").each(function () {
                var userId = $(this).attr("data-id");
                var user = {};
                user.userId = userId;
                user.status = '0';
                user.applyId = applyId;
                userArr.push(user);
            });
            // 数据
            var subjectArr = [];
            var flag = true;
            $(".layui-question-ctn .overbtn-oper").each(function () {
                var subject = {};
                var subjectType = $(this).attr("data-type");
                var subjectNum = $(this).find(".div-single-choice-tit").attr("data-num");
                subject.type = subjectType;
                subject.orderNum = subjectNum;
                // 1单选2多选3填空
                var subjectTitle = $(this).find(".div-single-choice-tit .div-single-choice-tit-name").html();
                if (isBlank(subjectTitle)) {
                    flag = false;
                    dialog.msg("第" + subjectNum + "题题目不能为空");
                    return false;
                }
                subject.title = subjectTitle;
                var boolFlag = true;
                if (subjectType == "1" || subjectType == "2") {
                    var selectArr = [];
                    $(this).find(".single-choice-answer ul li").each(function () {
                        var select = {};
                        // 标题
                        var selectTitle = $(this).find(".answer-line").html();
                        if (isBlank(selectTitle)) {
                            boolFlag = false;
                            dialog.msg("第" + subjectNum + "题选项不能为空");
                            return false;
                        }
                        select.title = selectTitle;
                        selectArr.push(select);
                    });
                    subject.selectList = selectArr;
                }
                if (!boolFlag) {
                    flag = false;
                    return false;
                }
                subjectArr.push(subject);
            });
            if (!flag) {
                return false;
            }
            questionData.status = "1";
            questionData.applyId = applyId;
            questionData.subjectJson = JSON.stringify(subjectArr)
            questionData.userJson = JSON.stringify(userArr)
            var url = "/work/question/save";
            if (id) {
                url = "/work/question/update";
                questionData.id = id;
            }
            // console.log(JSON.stringify(questionData))
            baseutil.AjaxPostMark(url, {questionJson:JSON.stringify(questionData)}, function () {
                // console.log(1);
                dialog.msg("保存成功");
                parent.tabRefresh(parentMenuId);
                if (id) {
                    parent.tabDelete("edit" + id);
                } else {
                    parent.tabDelete('questionEdit');
                }
            });
            return false;
        });

        // 监听发布
        form.on('submit(publishBtn)', function (data) {
            // 完成编辑题目才能进行下一步
            var editFlag = true;
            $(".layui-question-ctn .single-choice-list").each(function () {
                if(!$(this).hasClass("overbtn-oper")){
                    editFlag = flag;
                    return false;
                }
            });
            if (!editFlag) {
                dialog.msg("请完成题目编辑");
                return false;
            }
            var field = data.field;
            var questionData = {};
            questionData.title = field.title;
            questionData.type = field.type;
            if (isBlank(field.type)) {
                dialog.msg("请选择类型");
                return false;
            }
            questionData.objectType = field.objectType;
            if (field.type == '2' && isBlank(field.objectType)) {
                dialog.msg("请选择对象");
                return false;
            }
            questionData.startTimeStr = field.startTime;
            questionData.endTimeStr = field.endTime;
            questionData.remark = field.remark;
            // 用户
            var userArr = [];
            $("#questionUser span").each(function () {
                var userId = $(this).attr("data-id");
                var user = {};
                user.userId = userId;
                user.status = '0';
                user.applyId = applyId;
                userArr.push(user);
            });
            // 数据
            var subjectArr = [];
            var flag = true;
            $(".layui-question-ctn .overbtn-oper").each(function () {
                var subject = {};
                var subjectType = $(this).attr("data-type");
                var subjectNum = $(this).find(".div-single-choice-tit").attr("data-num");
                subject.type = subjectType;
                subject.orderNum = subjectNum;
                // 1单选2多选3填空
                var subjectTitle = $(this).find(".div-single-choice-tit .div-single-choice-tit-name").html();
                if (isBlank(subjectTitle)) {
                    flag = false;
                    dialog.msg("第" + subjectNum + "题题目不能为空");
                    return false;
                }
                subject.title = subjectTitle;
                var boolFlag = true;
                if (subjectType == "1" || subjectType == "2") {
                    var selectArr = [];
                    $(this).find(".single-choice-answer ul li").each(function () {
                        var select = {};
                        // 标题
                        var selectTitle = $(this).find(".answer-line").html();
                        if (isBlank(selectTitle)) {
                            boolFlag = false;
                            dialog.msg("第" + subjectNum + "题选项不能为空");
                            return false;
                        }
                        select.title = selectTitle;
                        selectArr.push(select);
                    });
                    subject.selectList = selectArr;
                }
                if (!boolFlag) {
                    flag = false;
                    return false;
                }
                subjectArr.push(subject);
            });
            if (!flag) {
                return false;
            }
            // 如果没有题目，不允许提交
            if (subjectArr == null || subjectArr.length == 0) {
                dialog.msg("请添加题目，否则不能发布");
                return false;
            }
            questionData.status = "3";
            questionData.applyId = applyId;
            questionData.subjectJson = JSON.stringify(subjectArr)
            questionData.userJson = JSON.stringify(userArr)
            var url = "/work/question/save";
            if (id) {
                url = "/work/question/update";
                questionData.id = id;
            }
            // console.log(JSON.stringify(questionData))
            baseutil.AjaxPostMark(url, {questionJson:JSON.stringify(questionData)}, function () {
                // console.log(1);
                dialog.msg("保存成功");
                parent.tabRefresh(parentMenuId);
                if (id) {
                    parent.tabDelete(id);
                } else {
                    parent.tabDelete('questionEdit');
                }
            });
            return false;
        });

        // 监听选择事件
        form.on('select(type)', function (data) {
            if (data.value == 2) {
                $("#showObject").show();
                // 如果showUser
                if ($("#objectType").val() == 4) {
                    $("#showUser").show();
                }
            } else {
                $("#showObject").hide();
                $("#showUser").hide();
            }
        });

        form.on('select(objectType)', function (data) {
            if (data.value == 4) {
                $("#showUser").show();
            } else {
                $("#showUser").hide();
            }
        });

        $('#cancel').bind('click', function () {
            if (id) {
                parent.tabDelete("edit" + id);
            } else {
                parent.tabDelete('questionEdit');
            }
        });

        //点击增加题型按钮
        $("#layui-form").on("click", ".layui-topic-btn", function () {
            var idType = $(this).attr("data-type-id");
            var topicType = $(this).find("span").text();
            var topicNum = $(".layui-question-ctn .single-choice-list").length;
            var str = "";
            var choose = "";
            var prmcheck = "";
            if (!topicNum) {
                topicNum = 1;
            } else {
                topicNum = topicNum * 1 + 1;
            }
            if (idType < 3) {
                if (idType == 1) {
                    choose = "radio";
                }
                if (idType == 2) {
                    choose = "checkbox";
                    prmcheck = "primary";
                }
                str = '<div class="single-choice-list" data-type="' + idType + '">' +
                    '<div class="layui-question-operabtn">' +
                    '<ul>' +
                    '<li class="sort-asc">上移</li>' +
                    '<li class="sort-down">下移</li>' +
                    '<li class="editopic">编辑</li>' +
                    '<li class="deletopic">删除</li>' +
                    '</ul>' +
                    '</div>' +
                    '<input type="text" class="single-choice-tit"  placeholder="请单击此处输入题目标题" >' +
                    '<div class="div-single-choice-tit" style=" display:none;" data-num="'+topicNum+'"><span class="topicNum">' + topicNum + '</span>、<span class="div-single-choice-tit-name"></span><span class="base-color-bule">[' + topicType + ']</span></div>' +
                    '<div class="single-choice-answer" >' +
                    '<ul>' +
                    '<li>' +
                    '<div class="single-choice-alph"><input type="' + choose + '" name="sex" value="A." title="A." lay-skin="' + prmcheck + '"></div>' +
                    '<input type="text" placeholder="请输入选项内容" class="single-choice-answer-txt" >' +
                    '<span class="answer-line" style="display:none;"></span>' +
                    '<div class="option-list"><i class="iconfont">&#xe654;</i></div>' +
                    '</li>' +
                    '<li>' +
                    '<div class="single-choice-alph"><input type="' + choose + '" name="sex" value="B." title="B." lay-skin="' + prmcheck + '"></div>' +
                    '<input type="text" placeholder="请输入选项内容" class="single-choice-answer-txt">' +
                    '<span class="answer-line" style="display:none;"></span>' +
                    '<div class="option-list"><i class="iconfont">&#xe654;</i></div>' +
                    '</li>' +
                    '</ul>' +
                    '\<button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-btn-addoption" style="margin-left:50px;"><i class="iconfont marr5">&#xe611;</i>添加选项</button>' +
                    '</div>' +
                    '<div class="layui-form-item clearfix" style="text-align:center; margin-bottom:0;">' +
                    '<button class="layui-btn layui-btn-normal layui-over-btn" type="button" >完成编辑</button>' +
                    '<button type="button" id="" class="layui-btn layui-btn-primary canclesubject">取消编辑</button>' +
                    '</div>' +
                    '</div>';
            }
            else (
                str = '<div class="single-choice-list" data-type="' + idType + '">' +
                    '<div class="div-single-choice-tit" style=" display: none" data-num="'+topicNum+'"><span class="topicNum">' + topicNum + '</span>、<span class="div-single-choice-tit-name"></span><span class="base-color-bule">[' + topicType + ']</span></div>' +
                    '<div class="layui-question-operabtn">' +
                    '<ul>' +
                    '<li class="sort-asc">上移</li>' +
                    '<li class="sort-down">下移</li>' +
                    '<li class="editopic">编辑</li>' +
                    '<li class="deletopic">删除</li>' +
                    '</ul>' +
                    '</div>' +
                    '<input type="text" class="single-choice-tit"  placeholder="请单击此处输入题目标题">' +
                    '<div class="single-choice-answer">' +
                    '<textarea class="shortAnswer" rows="2" placeholder=""></textarea>' +
                    '<p class="short-answer-textarea" style="display: none;"></p>' +
                    '</div>' +
                    '<div class="layui-form-item clearfix" style="text-align:center; margin-bottom:0;">' +
                    '<button class="layui-btn layui-btn-normal  layui-over-btn" type="button">完成编辑</button>' +
                    '<button type="button" id="" class="layui-btn layui-btn-primary canclesubject">取消编辑</button>' +
                    '<button type="button" style="display: none;" id="" class="layui-btn layui-btn-primary"></button>' +
                    '</div>' +
                    '</div>'
            )
            $(".layui-question-ctn").append(str);
            form.render();
        })

        //获取题型序号
        var numOp = $(0)
        $("#wj").on("click", ".option-list", function () {
            //console.log(1);
            var t = $(this).parents(".single-choice-answer");
            $(this).parent("li").remove();
            sortA(t);
        });
        $("#wj").on("click", ".layui-btn-addoption", function () {
            var sort = '@';
            if ($(this).parents(".single-choice-answer").find("ul li:last-child").find(".single-choice-alph input").val()) {
                sort = $(this).parents(".single-choice-answer").find("ul li:last-child").find(".single-choice-alph input").val().slice(0, 1);
            }
            //console.log(sort)
            var sortCode = sort.charCodeAt();
            //最多A-Z
            if (sortCode > 89) return
            //console.log(sortCode);
            var newsort = String.fromCharCode(sortCode + 1);
            //console.log(sortCode + 1);
            var type = $(this).parents(".single-choice-list").attr("data-type");
            var choose = "";
            var prmcheck = "";
            if (type == 1) {
                choose = "radio";
            }
            if (type == 2) {
                choose = "checkbox";
                prmcheck = "primary";
            }
            var str = '<li>' +
                '<div class="single-choice-alph"><input type="' + choose + '" name="" value="' + newsort + '." title="' + newsort + '." lay-skin="' + prmcheck + '"></div>' +
                '<input type="text" placeholder="请输入选项内容" class="single-choice-answer-txt" >' +
                '<span class="answer-line" style="display:none;"></span>' +
                '<div class="option-list"><i class="iconfont">&#xe654;</i></div>' +
                '</li>';
            var append = $(this).parent(".single-choice-answer").find("ul").append(str);
            form.render();

        })
        //完成编辑
        $("#wj").on("click", ".layui-over-btn", function () {
            var topicName = $(this).parents(".single-choice-list").find("input.single-choice-tit").val();
            $(this).parents(".single-choice-list").find(".div-single-choice-tit .div-single-choice-tit-name").text(topicName);
            var shortAnswer = $(this).parents(".single-choice-list").find("textarea.shortAnswer").val();
            $(this).parents(".single-choice-list").find("p.short-answer-textarea").text(shortAnswer);
            $(this).parent(".layui-form-item").hide();
            $(this).parents(".single-choice-list").find("input.single-choice-tit").hide();
            $(this).parents(".single-choice-list").find(".div-single-choice-tit").show();
            $(this).parents(".single-choice-list").find(".layui-btn-addoption").hide();
            $(this).parents(".single-choice-list").find("textarea.shortAnswer").hide();
            $(this).parents(".single-choice-list").find("p.short-answer-textarea").show();
            $(this).parents(".single-choice-list").find(".single-choice-answer ul li").each(function () {
                var optionName = $(this).find("input.single-choice-answer-txt").val();
                $(this).find("span.answer-line").text(optionName);
                $(this).find("input.single-choice-answer-txt").hide();
                $(this).find("span.answer-line").show();
                $(this).find(".option-list").hide();
            });
            $(this).parents(".single-choice-list").addClass("overbtn-oper");

        })

        $("#wj").on("click", ".canclesubject", function () {
            //var topicName = $(this).parents(".single-choice-list").find("input.single-choice-tit").val();
            //$(this).parents(".single-choice-list").find(".div-single-choice-tit .div-single-choice-tit-name").text(topicName);
            ///var shortAnswer = $(this).parents(".single-choice-list").find("textarea.shortAnswer").val();
           // $(this).parents(".single-choice-list").find("p.short-answer-textarea").text(shortAnswer);
            $(this).parent(".layui-form-item").hide();
            $(this).parents(".single-choice-list").find("input.single-choice-tit").hide();
            $(this).parents(".single-choice-list").find(".div-single-choice-tit").show();
            $(this).parents(".single-choice-list").find(".layui-btn-addoption").hide();
            $(this).parents(".single-choice-list").find("textarea.shortAnswer").hide();
            $(this).parents(".single-choice-list").find("p.short-answer-textarea").show();
            $(this).parents(".single-choice-list").find(".single-choice-answer ul li").each(function () {
                //var optionName = $(this).find("input.single-choice-answer-txt").val();
                //$(this).find("span.answer-line").text(optionName);
                $(this).find("input.single-choice-answer-txt").hide();
                $(this).find("span.answer-line").show();
                $(this).find(".option-list").hide();
            });
            $(this).parents(".single-choice-list").addClass("overbtn-oper");
        })

        //保存后再编辑题目
        // $("#wj").on("click", ".editopic", function () {
        //     $(this).parents(".single-choice-list").find(".layui-form-item").show();
        //     $(this).parents(".single-choice-list").find("input.single-choice-tit").show();
        //     $(this).parents(".single-choice-list").find(".div-single-choice-tit").hide();
        //     $(this).parents(".single-choice-list").find(".layui-btn-addoption").show();
        //     $(this).parents(".single-choice-list").find("textarea.shortAnswer").show();
        //     $(this).parents(".single-choice-list").find("p.short-answer-textarea").hide();
        //     $(this).parents(".single-choice-list").find(".single-choice-answer ul li").each(function () {
        //         $(this).find("input.single-choice-answer-txt").show();
        //         $(this).find("span.answer-line").hide();
        //         $(this).find(".option-list").show();
        //     });
        //     $(this).parents(".single-choice-list").removeClass("overbtn-oper");
        // })

        $("#wj").on("click", ".editopic", function () {
             var topicName2=$(this).parents(".single-choice-list").find(".div-single-choice-tit .div-single-choice-tit-name").text();
             $(this).parents(".single-choice-list").find("input.single-choice-tit").val(topicName2);
             var shortAnswer2 =$(this).parents(".single-choice-list").find("p.short-answer-textarea").text();
             $(this).parents(".single-choice-list").find("textarea.shortAnswer").val(shortAnswer2);
            $(this).parents(".single-choice-list").find(".layui-form-item").show();
            $(this).parents(".single-choice-list").find("input.single-choice-tit").show();
            $(this).parents(".single-choice-list").find(".div-single-choice-tit").hide();
            $(this).parents(".single-choice-list").find(".layui-btn-addoption").show();
            $(this).parents(".single-choice-list").find("textarea.shortAnswer").show();
            $(this).parents(".single-choice-list").find("p.short-answer-textarea").hide();
            $(this).parents(".single-choice-list").find(".single-choice-answer ul li").each(function () {
                var optionName2 =$(this).find("span.answer-line").text();
                $(this).find("input.single-choice-answer-txt").val(optionName2);
                $(this).find("input.single-choice-answer-txt").show();
                $(this).find("span.answer-line").hide();
                $(this).find(".option-list").show();
            });
            $(this).parents(".single-choice-list").removeClass("overbtn-oper");
        })

        //删除题目
        $("#wj").on("click", ".layui-question-operabtn .deletopic", function () {
            $(this).parents(".single-choice-list").remove();
            sort();
        })

        //上移下移
        $("#wj").on('click', '.sort-down', function () {
            //判断是否有下一个节点
            if ($(this).parents('.single-choice-list').nextAll().length > 0) {
                var num = $(this).parents('.single-choice-list').index();
                $(this).parents('.single-choice-list').next().find(".div-single-choice-tit").attr("data-num", num * 1 + 1);
                $(this).parents('.single-choice-list').find(".div-single-choice-tit").attr("data-num",num * 1 + 2);

                $(this).parents('.single-choice-list').next().find("span.topicNum").text(num * 1 + 1);
                $(this).parents('.single-choice-list').find("span.topicNum").text(num * 1 + 2);

                $(this).parents('.single-choice-list').next().after($(this).parents('.single-choice-list').prop('outerHTML'));
                $(this).parents('.single-choice-list').remove();

            }
        }).on('click', '.sort-asc', function () {
            //判断是否有上一个节点
            if ($(this).parents('.single-choice-list').prevAll().length > 0) {
                var num = $(this).parents('.single-choice-list').index();
                $(this).parents('.single-choice-list').prev().find(".div-single-choice-tit").attr("data-num", num * 1 + 1);
                $(this).parents('.single-choice-list').find(".div-single-choice-tit").attr("data-num", num);

                $(this).parents('.single-choice-list').prev().find("span.topicNum").text(num * 1 + 1);
                $(this).parents('.single-choice-list').find("span.topicNum").text(num);

                $(this).parents('.single-choice-list').prev().before($(this).parents('.single-choice-list').prop('outerHTML'));
                $(this).parents('.single-choice-list').remove();
            }
        })

        //题目排序方法
        function sort() {
            $("#wj .div-single-choice-tit").each(function(i, e) {
                $(e).attr("data-num",i+1);
                $(e).find(".topicNum").html(i + 1);
            });
        }
        //选项排序方法
        function sortA(obj) {
            obj.find("li").each(function(i, e) {
                var code = String.fromCharCode(65 + i);
                $(e).find('.single-choice-alph input').val(code+".");
                $(e).find('.single-choice-alph input').attr("title",code+".");
                $(e).find('.single-choice-alph .layui-form-radio div').text(code+".");
                $(e).find('.single-choice-alph .layui-form-checkbox span').text(code+".");
            });
        }
    });

</script>
</body>
</html>